<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品网页</title>
    <link rel="stylesheet" href="注册common.css">
    <link rel="stylesheet" href="注册.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ffffff;
            color: #fff;
            font-family: Arial, sans-serif;
        }

        header {
            padding: 20px;
            text-align: center;
        }

        main {
            padding: 20px;
        }

        .item {
            margin-bottom: 20px;
        }

        footer {
            text-align: center;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .pagination {
            margin-top: 10px;
            margin-left: 1100px;
            display: inline-block;
            list-style-type: none;
            padding: 0;
            color: pink;
        }

        .pagination li {
            display: inline;
            margin-right: 10px;
        }

        .pagination li a {
            color: #fff;
            padding: 5px 10px;
            border: 1px solid #481717;
            text-decoration: none;
            color: pink;
        }

        .pagination li a:hover {
            background-color: #fff;
            color: #000;
        }
        .more_shop{
            border-radius: 10px;
            height: 150px;
            background-color: #f0f0f0;
        }
        .more_shop .more_info .sort li{
            float: left;
            margin-left: 150px;
            font-size: 20px;
            color: #333;
            font-weight: bolder;
            margin-top: 20px;
        }
        .more_info{
            height: 65px;
            border-bottom: 2px solid #fff;
        }
        .up{
            position: absolute;
            top: 169px;
        }
        .down{
            position: absolute;
            top: 185px;
            left: 619px;
        }
        .more_shop .more_sort .order li{
            float: left;
            margin-left: 100px;
            font-size: 18px;
            color: #333;
            font-weight: bolder;
            margin-top: 40px;
        }
        .item{
            height: 500px;
        }
        .search-container {
            float: left;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
            margin-left: 100px;
        }

        .search-box {
            display: flex;
            align-items: center;
            border: 1px solid #eae3e3;
            border-radius: 15px;
            padding: 8px;
        }

        .search-box input[type="text"] {
            border: none;
            outline: none;
            padding: 4px;
            font-size: 16px;
        }

        .search-box button {
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 9px;
            padding: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        .product-container {
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px;
            border-radius: 10px;
        }

        .product {
            width: 250px;
            margin: 30px;
            padding: 10px;
            border: 1px solid #e9e9e9;
            border-radius: 4px;
            text-align: center;
        }

        .product img {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
        }
        .product h3{
            color: #000000;
        }
        .product h5{
            color: #4b4b4e;
        }
        .product p{
            color: #ea3b3b;
            font-weight: bolder;
            background-color: #f3f2f2;
            padding: 2px;
        }
        .more_info .sort li a:hover{
            color: #da6464;
        }
        .more_sort .order li a:hover{
            color: #ff403d;
        }
        .product-container div:hover{
            border-color: #0d0d0e;
        }
        .paginationStyle{
            background-color: #ff5466;
        }
        .sortColor{
            color: #fc2828;
        }
        .begin{
            text-align: center;
            top: 2105px;
            right: 356px;
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: chocolate;
        }
        /*.sidebar {*/
        /*    width: 200px;*/
        /*    height: 100vh;*/
        /*    background-color: #f1f1f1;*/
        /*    padding: 20px;*/
        /*    position: fixed; !* 添加这行 *!*/
        /*}*/

        /*.sidebar ul {*/
        /*    list-style-type: none;*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*.sidebar li {*/
        /*    margin-bottom: 10px;*/
        /*}*/

        /*.sidebar a {*/
        /*    text-decoration: none;*/
        /*    color: #333;*/
        /*    font-weight: bold;*/
        /*}*/
    </style>
</head>
<body>
<div class="shortcut">
    <div class="wrapper">
        <i class="avatar"></i>
        <ul>
            <li><a href="登录login.html" id="top">您好！请先登录</a></li>
            <li><a href="注册导航.html">免费注册</a></li>
            <li><a href="index.html">主页</a></li>
            <li><a href="ShopCar.html">购物车</a></li>
            <li><a href="#">收货中心</a></li>
            <li><a href="homePage.html">个人中心</a></li>
            <li><a href="视觉介绍.html"><span></span>官网</a></li>
        </ul>
    </div>
</div>
<header>
    <div class="more_shop">
        <div class="more_info">
            <ul class="sort">
                <li><a href="javaScript:void(0);"class="sortColor phone" onclick="sort_Re('tb_phone','sort')">电子产品</a></li>
                <li><a href="javaScript:void(0);" class="cloth" onclick="sort_Re('tb_shoes','sort')">服装鞋帽</a></li>
                <li><a href="javaScript:void(0);" class="jewelry" onclick="sort_Re('tb_jewelry','sort')">珠宝和首饰</a></li>
                <li><a href="javaScript:void(0);" class="drawUp" onclick="sort_Re('tb_drawup','sort')">美妆</a></li>
            </ul>
        </div>
        <div class="more_sort">
            <ul class="order">
                <li><a href="javaScript:void(0);" class="sortColor" onclick="sort_Re(status,'sort')">综合排序</a></li>
                <li>价格<a href="javaScript:void(0);"onclick="sort_Re(status,'price')" style="font-size: 20px"> ↑</a></li>
                <li>价格<a href="javaScript:void(0);"onclick="sort_Re(status,'price_desc')" style="font-size: 20px"> ↓</a></li>
            </ul>
        </div>
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="search-input" placeholder="输入搜索内容">
                <button>搜索</button>
            </div>
        </div>
    </div>
<!--    <div class="sidebar">-->
<!--        <ul>-->
<!--            <li><a href="#">首页</a></li>-->
<!--            <li><a href="#">关于我们</a></li>-->
<!--            <li><a href="#">产品</a></li>-->
<!--            <li><a href="#">服务</a></li>-->
<!--            <li><a href="#">联系我们</a></li>-->
<!--        </ul>-->
<!--    </div>-->

    <!-- 添加一些内容来测试滚动效果 -->

</header>
<div class="img_fa" style="text-align: center">
    <img src="img/to4.jpg"height="400">
</div>

<main>
    <div class="product-container">
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>
        <div class="product">
            <a href="#"><img src="img/nike3.png" alt="商品1"></a>
            <h3>商品1</h3>
            <h5>这双鞋很美丽</h5>
            <p>价格：$100</p>
        </div>




    </div>

    <!-- 添加更多商品... -->

    <ul class="pagination">
        <li><a href="javaScript:void(0);" class="first_btn paginationStyle">1</a></li>
        <li><a href="javaScript:void(0);" class="second_btn">2</a></li>
        <li><a href="javaScript:void(0);" class="third_btn">3</a></li>
        <li><a href="javaScript:void(0);">...</a></li>
        <!-- 更多分页按钮... -->
    </ul>
</main>

<footer>
    <div class="footer ">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <span>快乐购物</span>
                    </li>
                    <li>
                        <span>分享乐趣</span>
                    </li>
                    <li>
                        <span>收获折扣</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a>
                </p>
                <p>CMY @ </p>
            </div>
        </div>
    </div>
</footer>
</body>
<script src="../ajax/jquery-3.5.1.min.js"></script>
<script>
    let a_hrefs=$(".product a")
    let sign="tb_phone"
    let s_price="price_desc"
    let status="tb_phone"
    const sort=document.querySelector('.more_info')
    sort.addEventListener('click',function (e){
        if (e.target.tagName==='A'){
            this.querySelector('.sortColor').classList.remove('sortColor')
            e.target.classList.add('sortColor')

        }
    })
    const order=document.querySelector('.order')
    order.addEventListener('click',function (e){
        if (e.target.tagName==='A'){
            this.querySelector('.sortColor').classList.remove('sortColor')
            e.target.classList.add('sortColor')

        }
    })




    function sort_Re(type,where){
        let imgs=$(".product img")
        let infos=$(".product h5")
        let prices=$(".product p")
        let names=$(".product h3")
        pageSize=12
        const backimgs=document.querySelector('.img_fa img')
        $.ajax({
            url:'http://127.0.0.1:5000/goods',
            type:'get',
            data:{"pageNow":1,"pageSize":12,"type":type,"where":where},
            success:function (pros){
                if (type==="tb_phone"){
                    backimgs.src='img/to4.jpg'
                }
                if (type==="tb_shoes"){
                    backimgs.src='img/小图片.jpg'
                }
                if (type==="tb_jewelry"){
                    backimgs.src='img/to3.jpg'
                }
                if (type==="tb_drawup"){
                    backimgs.src='img/drwa.jpg'
                }
                for (let i =1; i <pageSize ; i++) {
                    childs[i].style.display='block'
                }
                if (pros!=null&&pros!=''){
                    first.innerHTML=1
                    second.innerHTML=2
                    third.innerHTML=3
                    first.classList.add('paginationStyle')
                    second.classList.remove('paginationStyle')
                    third.classList.remove('paginationStyle')
                    status=type
                    sign=type
                    if (type==="allGoods"){
                        type="tb_phone"
                    }
                    if (sign==="allGoods"){
                        sign="tb_phone"
                    }
                    s_price=where
                    for (let i = 0; i < pros.length; i++) {
                        $(imgs[i]).attr("src",pros[i].img)
                        $(infos[i]).text(pros[i].info)
                        $(prices[i]).text("￥"+pros[i].price)
                        $(names[i]).text(pros[i].name)
                        let id=pros[i].id
                        $(a_hrefs[i]).unbind();
                        $(a_hrefs[i]).bind("click",function (){
                            let data=[]
                            data.push({
                                ID: id,
                                type:type
                            })
                            sessionStorage.setItem('ID',JSON.stringify(data))
                            location.href="商品页面.html"
                        })
                    }
                }
            }
        })
    }








    let recover=0
    $(function (){
        sort_Re("allGoods","sort")
    })
    const first=document.querySelector(".first_btn")
    const second=document.querySelector(".second_btn")
    const third=document.querySelector(".third_btn")
    const pagination=document.querySelector('.pagination')
    const childs=document.querySelectorAll('.product')
    let bool=true


    third.addEventListener('click',function (){
        let imgs=$(".product img")
        let infos=$(".product h5")
        let prices=$(".product p")
        let names=$(".product h3")
        let pageNow=parseInt(third.innerHTML)
        const pageSize=12
        $.ajax({
            url:'http://127.0.0.1:5000/goods',
            type:'get',
            data:{"pageNow":pageNow,"pageSize":pageSize,"type":status,"where":s_price},
            success:function (pros){
                console.log(pageSize-pros.length)
                console.log(bool)
                if (bool&&pageSize-pros.length===0){
                    second.innerHTML=third.innerHTML
                    third.innerHTML=parseInt(third.innerHTML)+1
                    first.innerHTML=second.innerHTML-1
                    second.classList.add('paginationStyle')
                    first.classList.remove('paginationStyle')
                }
                if (pros!=null&&pros!=''){
                    // console.log(pros.length)
                    for (let i = 0; i < pros.length; i++) {
                        $(imgs[i]).attr("src",pros[i].img)
                        $(infos[i]).text(pros[i].info)
                        $(prices[i]).text("￥"+pros[i].price)
                        $(names[i]).text(pros[i].name)
                        let id=pros[i].id
                        $(a_hrefs[i]).unbind();
                        $(a_hrefs[i]).bind("click",function (){
                            let data=[]
                            data.push({
                                ID: id,
                                type:sign
                            })
                            sessionStorage.setItem('ID',JSON.stringify(data))
                            location.href="商品页面.html"
                        })
                    }
                    if (pageSize-pros.length>0){

                        third.classList.add('paginationStyle')
                        first.classList.remove('paginationStyle')
                        second.classList.remove('paginationStyle')

                        console.log(childs[pageSize-pros.length])
                        console.log(pageSize-pros.length)
                        for (let j = pageSize-(pageSize-pros.length); j <pageSize ; j++) {
                            childs[j].style.display='none'
                        }
                        bool=false
                        recover=pageSize-pros.length
                    }
                }
            }
        })

    })



    first.addEventListener('click',function (){
        let imgs=$(".product img")
        let infos=$(".product h5")
        let prices=$(".product p")
        let names=$(".product h3")
        if (parseInt(first.innerHTML)===1){
            first.classList.add('paginationStyle')
            second.classList.remove('paginationStyle')
            third.classList.remove('paginationStyle')
            $(function (){
                let pageNow=parseInt(first.innerHTML)
                const pageSize=12
                $.ajax({
                    url:'http://127.0.0.1:5000/goods',
                    type:'get',
                    data:{"pageNow":pageNow,"pageSize":pageSize,"type":status,"where":s_price},
                    success:function (pros){
                        console.log(pros.length)
                        if (pros!=null&&pros!=''){
                            for (let j = pageSize-recover; j <pageSize ; j++) {
                                childs[j].style.display='block'
                            }
                            bool=false
                            for (let i = 0; i < pros.length; i++) {
                                $(imgs[i]).attr("src",pros[i].img)
                                $(infos[i]).text(pros[i].info)
                                $(prices[i]).text("￥"+pros[i].price)
                                $(names[i]).text(pros[i].name)
                                let id=pros[i].id
                                $(a_hrefs[i]).unbind();
                                $(a_hrefs[i]).bind("click",function (){
                                    let data=[]
                                    data.push({
                                        ID: id,
                                        type:sign
                                    })
                                    sessionStorage.setItem('ID',JSON.stringify(data))
                                    location.href="商品页面.html"
                                })
                            }
                        }
                    }
                })
            })
        }
        else {
            second.innerHTML=first.innerHTML
            first.innerHTML=parseInt(first.innerHTML)-1
            third.innerHTML=parseInt(second.innerHTML)+1
            $(function (){

                let pageNow=parseInt(second.innerHTML)
                const pageSize=12
                $.ajax({
                    url:'http://127.0.0.1:5000/goods',
                    type:'get',
                    data:{"pageNow":pageNow,"pageSize":pageSize,"type":status,"where":s_price},
                    success:function (pros){
                        if (!bool){
                            third.classList.remove('paginationStyle')
                            second.classList.add('paginationStyle')
                            for (let i = pageSize-recover; i <pageSize ; i++) {
                                childs[i].style.display='block'
                            }
                            bool=true
                        }
                        if (pros!=null&&pros!=''){
                            console.log(pros.length)
                            for (let i = 0; i < pros.length; i++) {
                                $(imgs[i]).attr("src",pros[i].img)
                                $(infos[i]).text(pros[i].info)
                                $(prices[i]).text("￥"+pros[i].price)
                                $(names[i]).text(pros[i].name)
                                let id=pros[i].id
                                $(a_hrefs[i]).unbind();
                                $(a_hrefs[i]).bind("click",function (){
                                    let data=[]
                                    data.push({
                                        ID: id,
                                        type:sign
                                    })
                                    sessionStorage.setItem('ID',JSON.stringify(data))
                                    location.href="商品页面.html"
                                })
                            }
                        }
                    }
                })
            })
        }

    })



    second.addEventListener('click',function (){
        if (parseInt(first.innerHTML)===1){
            first.classList.remove('paginationStyle')
            second.classList.add('paginationStyle')
            let pageNow=parseInt(second.innerHTML)
            let pageSize=12
            $(function (){
                let imgs=$(".product img")
                let infos=$(".product h5")
                let prices=$(".product p")
                let names=$(".product h3")
                $.ajax({
                    url:'http://127.0.0.1:5000/goods',
                    type:'get',
                    data:{"pageNow":pageNow,"pageSize":pageSize,"type":status,"where":s_price},
                    success:function (pros){
                        if (pros!=null&&pros!=''){
                            if (!bool){
                                third.classList.remove('paginationStyle')
                                second.classList.add('paginationStyle')
                                for (let i = pageSize-recover; i <pageSize ; i++) {
                                    childs[i].style.display='block'
                                }
                                bool=true
                            }
                            console.log(pros.length)
                            for (let i = 0; i < pros.length; i++) {
                                $(imgs[i]).attr("src",pros[i].img)
                                $(infos[i]).text(pros[i].info)
                                $(prices[i]).text("￥"+pros[i].price)
                                $(names[i]).text(pros[i].name)
                                let id=pros[i].id
                                $(a_hrefs[i]).unbind();
                                $(a_hrefs[i]).bind("click",function (){
                                    let data=[]
                                    data.push({
                                        ID: id,
                                        type:sign
                                    })
                                    sessionStorage.setItem('ID',JSON.stringify(data))
                                    location.href="商品页面.html"
                                })
                            }
                        }
                    }
                })
            })

        }else {
            let pageNow=parseInt(second.innerHTML)
            let pageSize=12
            $(function (){
                let imgs=$(".product img")
                let infos=$(".product h5")
                let prices=$(".product p")
                let names=$(".product h3")
                $.ajax({
                    url:'http://127.0.0.1:5000/goods',
                    type:'get',
                    data:{"pageNow":pageNow,"pageSize":pageSize,"type":status,"where":s_price},
                    success:function (pros){
                        if (!bool){
                            third.classList.remove('paginationStyle')
                            second.classList.add('paginationStyle')
                            for (let i = pageSize-recover; i <pageSize ; i++) {
                                childs[i].style.display='block'
                            }
                            bool=false
                        }
                        if (pros!=null&&pros!=''){
                            console.log(pros.length)
                            for (let i = 0; i < pros.length; i++) {
                                $(imgs[i]).attr("src",pros[i].img)
                                $(infos[i]).text(pros[i].info)
                                $(prices[i]).text("￥"+pros[i].price)
                                $(names[i]).text(pros[i].name)
                                let id=pros[i].id
                                $(a_hrefs[i]).unbind();
                                $(a_hrefs[i]).bind("click",function (){
                                    let data=[]
                                    data.push({
                                        ID: id,
                                        type:sign
                                    })
                                    sessionStorage.setItem('ID',JSON.stringify(data))
                                    location.href="商品页面.html"
                                })
                            }
                        }
                    }
                })
            })

        }
    })
    const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
    const SecondLi=FirstLi.nextElementSibling
    function render(){
        const uname=JSON.parse(sessionStorage.getItem('YM'))
        if (uname){
            FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname.name}</i></a>`
            SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
        }
        else{
            FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
            SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

        }
    }
    render()
    SecondLi.addEventListener('click',function (){
        sessionStorage.removeItem('YM')
        render()
    })
</script>
</html>
